import '@/assets/package.scss'
import PropTypes from 'prop-types'
import { useState } from 'react'

function ModalHerder(props) {
    let { onCancel, title, closeable } = props;
    return (
        <div>
            <div>{title}</div>
            <div onClick={onCancel}>{closeable && "X"}</div>
        </div>
    )
}
function ModalFooter(props) {
    let { diyBtn, onOk, type, onCancel } = props;
    // 根据不同的type 渲染出不同的按钮组
    // 写渲染函数
    let renderFooter = () => {
        let btns = [];
        switch (type) {
            case "primary":
                btns = [
                    <Button type='primary' key='1' onClick={onOk}>确定</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case "danger":
                btns = [
                    <Button type='danger' key='1' onClick={onOk}>删除</Button>,
                    <Button key='2' onClick={onCancel}>取消</Button>
                ]
                break;
            case "info":
                btns = [
                    <Button type='info' key='1' onClick={onCancel}>我知道了</Button>,
                ]
                break;
        }
        return btns;
    }
    return diyBtn ? diyBtn() : renderFooter()
}
function Modal(props) {
    let { children, visiable, onCancel, width } = props;
    let handerLayer = (e) => {
        // console.log(e.target.dataset.value)
        if (e.target.dataset.value) {
            onCancel()
        }
    }
    return (
        <div className='ml-layer' style={{ display: visiable ? 'block' : 'none' }} data-value="out" onClick={handerLayer}>
            <div className="ml-modal" style={{ width: `${width}px`, marginLeft: `-${width / 2}px` }}>
                <header>
                    <ModalHerder {...props}></ModalHerder>
                </header>
                <main>{children}</main>
                <footer>
                    <ModalFooter {...props}></ModalFooter>
                </footer>
            </div>
        </div>
    )
}
// 对modal中接收的prop 进行数据校验
Modal.propsType = {
    title: PropTypes.string, // 期待传递的title是 string类型
    closeable: PropTypes.bool,
    children: PropTypes.node,
    type: PropTypes.oneOf(["confirm", "danger", "info", "primary"]),
    visiable: PropTypes.bool,
    onCancel: PropTypes.func,
    onOk: PropTypes.func,
    diyBtn: PropTypes.func,
    width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
}
// 非必传项，需要提供默认值
Modal.defaultProps = {
    title: "默认小标题",
    closable: true,
    children: <div>主体内容默认值</div>,
    type: "info",
    visiable: false,
    onCancel: () => { },
    onOk: () => { },
    diyBtn: () => { },
    width: 520
}

function Button(props) {
    let { type, children, onClick } = props;
    return (
        <div className='ml-button'>
            <span className={type} onClick={onClick}>{children}</span>
        </div>
    )
}
// 对modal中接收的prop 进行数据校验
Button.propsType = {
    title: PropTypes.oneOf(["default", "primary", "info", "danger"]), // 期待传递的title是 string类型
    children: PropTypes.node,
    onClick: PropTypes.func
}
// 非必传项，需要提供默认值
Button.defaultProps = {
    type: 'default',
    children: '按钮',
    onClick: () => { },
}

function PageA() {
    let [visiable, setVisiable] = useState(false);
    let submit = () => {
        setTimeout(() => {
            console.log('submit....')
            console.log('发送ajax 请求...')
            setVisiable(false)
        }, 200)
    }
    return (
        <div>
            {/* 如果状态变了 在类组件中 需要重新render 在函数组件中 是重新调用PageA函数 */}
            <button onClick={() => setVisiable(true)}>点我弹出</button>
            <Modal
                title={"添加用户"}
                closeable type='primary'
                visiable={visiable}
                onCancel={() => setVisiable(false)}
                onOk={submit}
                diyBtn={
                    () => {
                        return [
                            <Button type='primary' key='2' onClick={() => submit()}>确定</Button>,
                            <Button type='danger' key='1' onClick={() => setVisiable(false)}>取消添加</Button>,
                        ]
                    }
                }
                width={500}
            >
                <div>
                    <input type="text" />
                    <div>你确定要添加此用户吗 ?</div>
                </div>
            </Modal>
        </div>
    )
}

export default PageA